<div class="ScrollPic">
	<div class="img_list" id="imgList">
		<#list scrollPics as item>
		<div class="scrollPic_item">
			<div class="img">
				<img src="${item.src}" alt="">
			</div>
			<div class="img_desc">${item.title}</div>
		</div>
		</#list>
	</div>
</div>
<script>
	$(document).ready(function() {
		$('.imgList').append($('.imgList').html());
		//播放滚动
		var scrollTimer = null
		function startScroll(speed) {
			var timesRun = 0;
			speed = speed || 20
			var readyTimer = null
			
			readyTimer = setInterval(function() {
				timesRun++
				if(timesRun>30000) {
					console.log('图片加载超时（30s）')
					clearInterval(readyTimer)
					return
				}
				if (document.readyState == 'complete') {
					clearInterval(readyTimer)

					var imgList = $('#imgList')[0]
					var imgListWidth = $('#imgList').width()

					var left = parseInt(imgList.style.left) || 0

					scrollTimer = setInterval(function() {
						if(Math.abs(left) == parseInt(imgListWidth / 2)) {
							left = 0
						} else {
							left--
						}
						imgList.style.left = left + 'px'
					},speed)
				}
			})
		}
		//停止播放
		function stopScroll(timer) {
			clearInterval(timer);
		}
		//点击图片
		function clickPic(index) {
			this.$emit('clickPic',index)
		}

		startScroll();

		$('#imgList').mouseenter(function() {
			stopScroll(scrollTimer)
		})
		$('#imgList').mouseleave(function() {
			startScroll()
		})
	})
</script>